/* 页面整体样式 */
html, body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #483C6C;
    overflow: hidden;
}

/* 游戏背景 */
body {
    background: url(./imgs/bg.png) no-repeat;
    background-size: cover;
}

/* 游戏容器 */
.holder2048 {
    width: 280px;
    height: 280px;
    position: relative;
    margin: 50px auto; /* 增加自动居中的margin */
}

/* 修改了容器的颜色和边框样式 */
.holder2048 > .container {
    width: 100%;
    height: 100%;
    position: relative;
    border: 4px solid #999090f2; /* 较粗的灰色边框 */
    background-color: #F0F0F0; /* 淡灰色背景 */
    box-shadow: 0 20px 40px rgba(0,0,0,.2); /* 更深的阴影 */
}

/* 游戏方格 */
.holder2048 > .container > .mask {
    width: 70px;
    height: 70px;
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #434446; /* 较暗的灰色边框 */
}

.holder2048 > .container > .box {
    width: 66px;
    height: 66px;
    position: absolute;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    line-height: 70px;
}

/* 不同数值的方块颜色保持不变 */
/* ... */

/* 标题 */
.title {
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
    padding: 16px 0;
}

/* 重置按钮 */
.f5 {
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 主轴居中 */
    align-items: center; /* 交叉轴居中 */
    padding: 16px 15px;
}

.f5-btn {
    padding: 10px 20px; /* 给文本一些空间 */
    border: none; /* 移除边框 */
    border-radius: 5px; /* 圆角 */
    background-color: #638cb6; /* 背景颜色 */
    color: white; /* 文本颜色 */
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(30, 87, 160, 0.4); /* 较深的阴影 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

/* 鼠标悬停时改变按钮颜色 */
.f5-btn:hover {
    background-color: #749fcb;
}

.ewm-text {
    font-size: 1rem;
    color: #ffffff;
    padding: 5px 0;
    text-align: center;
}

/* 按钮 */
#start, #close {
    cursor: pointer;
}